<template>
    <div class="login-container">
        <form>
            <div id="login-box">
                <h2>用户登录</h2>
                <div class="input-box">
                    <span class="iconfont icon-username"></span>
                    <input type="text" v-model="loginObj.username" placeholder="输入用户名" />
                </div>
                <div class="input-box">
                    <span class="iconfont icon-3701mima"></span>
                    <input type="password" v-model="loginObj.password" placeholder="输入密码" />
                </div>
                <button @click="toLogin">登&emsp;录</button>
            </div>
        </form>

    </div>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {
            loginObj: {
                username: '',
                password: ''
            }
        }
    },
    methods: {
        toLogin() {
            console.log(this.loginObj)
            if (!this.doVerify(this.loginObj.username)) {
                this.$message.warning('用户名不能为空')
                return false
            }
            if (!this.doVerify(this.loginObj.password)) {
                this.$message.warning('密码不能为空')
                return false
            }
            this.submit(this.loginObj)
            return false
        },
        doVerify(s) {
            return (s = s.trim()) !== '';
        },
        submit(obj) {
            console.log('正在提交...')
        }
    }
}
</script>

<style scoped>
@import "../assets/css/login.css";
@import "../assets/iconfont/iconfont.css";
</style>